<template>
  <a-card :body-style="{ padding: 0, width: '100%' }" class="table-footer-container" :bordered="isBordered">
    <div class="flex items-center" :class="[innerPosition]">
      <paginationCopys v-model:current="pagination.page" v-model:pageSize="pagination.pageSize"
        :show-page-size="pagination.showSizePicker" :total="pagination?.pageCount" show-total
        @page-size-change="onPageSizeChange" @change="onChange" size="small" />
      <a-button v-if="showRefresh" style="margin-left: 10px" shape="circle" size="small" type="primary"
        @click="refresh">
        <template #icon>
          <IconLoop style="font-size: 14px" />
        </template>
      </a-button>
    </div>
  </a-card>
</template>

<script lang="ts">
import { computed, defineComponent, toRef, PropType } from 'vue'

export default defineComponent({
  name: 'TableFooter',
  props: {
    pagination: {
      type: Object,
      default: () => ({}),
      require: true,
    },
    showRefresh: {
      type: Boolean,
      default: true,
    },
    bordered: {
      type: Boolean,
      default: false,
    },
    position: {
      type: String as PropType<'start' | 'center' | 'end'>,
      default: 'center',
    },
  },
  setup(props) {
    const pagination = toRef(props, 'pagination')
    const isBordered = computed(() => props.bordered)
    const innerPosition = computed(() => {
      return 'justify-' + props.position
    })
    function onChange(page: number) {
      ; (pagination as any).value.page = page
        ; (pagination as any).value.onChange()
    }
    function onPageSizeChange(pageSize: number) {
      ; (pagination as any).value.pageSize = pageSize
        ; (pagination as any).value.onChange()
    }
    function refresh() {
      ; (pagination as any).value.onChange()
    }
    return {
      isBordered,
      innerPosition,
      onChange,
      onPageSizeChange,
      refresh,
    }
  },
})
</script>
<style lang="less" scoped>
:deep(.arco-pagination-item-active) {
  color: var(--color-white);
}

:deep(.arco-pagination-item-active:hover) {
  color: var(--color-white);
}


.table-footer-container {
  position: absolute;
  height: 45px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

</style>
